<script setup>
import { PerfectScrollbar } from "vue3-perfect-scrollbar";
import { themeConfig } from "@themeConfig";
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();

const router = useRouter();
const ability = useAbility();

// TODO: Get type from backend
const userData = useCookie("userData");

const logout = async () => {
  // Remove "accessToken" from cookie
  useCookie("accessToken").value = null;

  // Remove "userData" from cookie
  userData.value = null;
  await userStore.logout();
  clearInterval(userStore.heartbeatInterval);
  // Redirect to login page
  await router.push("/login");

  // ℹ️ We had to remove abilities in then block because if we don't nav menu items mutation is visible while redirecting user to login page

  // Remove "userAbilities" from cookie
  useCookie("userAbilityRules").value = null;

  // Reset ability to initial ability
  ability.update([]);
};

const userProfileList = [
  { type: "divider" },
  {
    type: "navItem",
    icon: "tabler-user",
    title: "Profile",
    to: {
      name: "apps-user-view-id",
      params: { id: 21 },
    },
  },
  {
    type: "navItem",
    icon: "tabler-settings",
    title: "Settings",
    to: {
      name: "pages-account-settings-tab",
      params: { tab: "account" },
    },
  },
  {
    type: "navItem",
    icon: "tabler-file-dollar",
    title: "Billing Plan",
    to: {
      name: "pages-account-settings-tab",
      params: { tab: "billing-plans" },
    },
    badgeProps: {
      color: "error",
      content: "4",
    },
  },
  { type: "divider" },
  {
    type: "navItem",
    icon: "tabler-currency-dollar",
    title: "Pricing",
    to: { name: "pages-pricing" },
  },
  {
    type: "navItem",
    icon: "tabler-question-mark",
    title: "FAQ",
    to: { name: "pages-faq" },
  },
];
</script>

<template>
  <VBadge
    v-if="userData"
    dot
    bordered
    location="bottom right"
    offset-x="1"
    offset-y="2"
    color="success"
  >
    <VAvatar
      size="38"
      class="cursor-pointer"
      :color="!(userData && userData.avatar) ? 'primary' : undefined"
      :variant="!(userData && userData.avatar) ? 'tonal' : undefined"
    >
      <VImg v-if="userData && userData.avatar" :src="userData.avatar" />
      <VIcon v-else icon="tabler-user" />

      <!-- SECTION Menu -->
      <VMenu activator="parent" width="240" location="bottom end" offset="12px">
        <VList>
          <!-- <VListItem>
            <div class="d-flex gap-2 align-center">
              <VListItemAction>
                <VBadge
                  dot
                  location="bottom right"
                  offset-x="3"
                  offset-y="3"
                  color="success"
                  bordered
                >
                  <VAvatar
                    :color="!(userData && userData.avatar) ? 'primary' : undefined"
                    :variant="!(userData && userData.avatar) ? 'tonal' : undefined"
                  >
                    <VImg
                      v-if="userData && userData.avatar"
                      :src="userData.avatar"
                    />
                    <VIcon
                      v-else
                      icon="tabler-user"
                    />
                  </VAvatar>
                </VBadge>
              </VListItemAction>

              <div>
                <h6 class="text-h6 font-weight-medium">
                  {{ userData.fullName || userData.username }}
                </h6>
                <VListItemSubtitle class="text-capitalize text-disabled">
                  {{ userData.role }}
                </VListItemSubtitle>
              </div>
            </div>
          </VListItem> -->

          <PerfectScrollbar :options="{ wheelPropagation: false }">
            <!-- <template
              v-for="item in userProfileList"
              :key="item.title"
            >
              <VListItem
                v-if="item.type === 'navItem'"
                :to="item.to"
              >
                <template #prepend>
                  <VIcon
                    :icon="item.icon"
                    size="22"
                  />
                </template>

                <VListItemTitle>{{ item.title }}</VListItemTitle>

                <template
                  v-if="item.badgeProps"
                  #append
                >
                  <VBadge
                    rounded="sm"
                    class="me-3"
                    v-bind="item.badgeProps"
                  />
                </template>
              </VListItem>

              <VDivider
                v-else
                class="my-2"
              />
            </template> -->

            <div class="px-4 py-2">
              <VBtn
                block
                size="small"
                color="error"
                append-icon="tabler-logout"
                @click="logout"
              >
                {{ themeConfig.app.Logout }}
              </VBtn>
            </div>
          </PerfectScrollbar>
        </VList>
      </VMenu>
      <!-- !SECTION -->
    </VAvatar>
  </VBadge>
</template>
